import { defineComponent, ref, onMounted } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { ScatterChart, EffectScatterChart } from "echarts/charts";
import mapJson from "../assets/map.json";
import {
  TitleComponent,
  TooltipComponent,
  GeoComponent,
  VisualMapComponent,
} from "echarts/components";
import { MockDataGenerator } from "../utils/mockData";
import * as echarts from "echarts";
import type { EChartsOption } from "echarts";

use([
  CanvasRenderer,
  ScatterChart,
  EffectScatterChart,
  TitleComponent,
  TooltipComponent,
  GeoComponent,
  VisualMapComponent,
]);

export default defineComponent({
  name: "MapVisualization",
  components: {
    VChart,
  },
  props: {
    title: {
      type: String,
      default: "区域数据分布",
    },
  },
  setup(props) {
    const mapData = MockDataGenerator.generateMapData();
    const mapLoaded = ref(false);

    const option = ref<EChartsOption>({
      title: {
        text: props.title,
        left: "center",
        textStyle: {
          color: "#ffd700",
          fontSize: 18,
          fontWeight: "bold",
        },
      },
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        borderColor: "#ffd700",
        borderWidth: 1,
        textStyle: {
          color: "#fff",
        },
        formatter: (params: any) => {
          if (params.data) {
            return `${params.data.name}<br/>数值: ${params.data.value[2]}`;
          }
          return "";
        },
      },
      geo: {
        map: "china",
        roam: false,
        zoom: 1.2,
        center: [105, 36],
        itemStyle: {
          areaColor: "rgba(0, 102, 255, 0.1)",
          borderColor: "rgba(0, 212, 255, 0.5)",
          borderWidth: 1,
          shadowColor: "rgba(0, 212, 255, 0.3)",
          shadowBlur: 10,
        },
        emphasis: {
          itemStyle: {
            areaColor: "rgba(0, 212, 255, 0.3)",
            borderColor: "#00d4ff",
            borderWidth: 2,
          },
          label: {
            show: false,
          },
        },
      },
      series: [
        {
          name: "数据点",
          type: "effectScatter",
          coordinateSystem: "geo",
          data: mapData.map((item) => ({
            name: item.name,
            value: [...item.coord, item.value],
          })),
          symbolSize: (val: number[]) => {
            return Math.max(val[2] / 50, 8);
          },
          showEffectOn: "render",
          rippleEffect: {
            brushType: "stroke",
            scale: 3,
            period: 4,
          },
          label: {
            formatter: "{b}",
            position: "right",
            show: true,
            color: "#fff",
            fontSize: 11,
            fontWeight: "bold",
          },
          itemStyle: {
            color: "#ffd700",
            shadowBlur: 10,
            shadowColor: "rgba(255, 215, 0, 0.8)",
          },
          zlevel: 1,
        },
      ],
    });

    onMounted(async () => {
      try {
        echarts.registerMap("china", mapJson);
        mapLoaded.value = true;
        console.log("中国地图加载成功 (MapVisualization)");
      } catch (error) {
        console.error("地图加载失败 (MapVisualization):", error);
        mapLoaded.value = true;
      }
    });

    return () => (
      <div class="chart-container">
        {mapLoaded.value ? (
          <VChart
            option={option.value}
            autoresize
            style="height: 100%; width: 100%;"
          />
        ) : (
          <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #ffd700;">
            加载地图数据中...
          </div>
        )}
      </div>
    );
  },
});
